<!--
 * @Author: tkp
 * @Date: 2022-12-05 15:18:07
-->
<template>
  <el-table :data="tableData" :border="border" ref="multipleTable" @selection-change="handleSelectionChange" :header-cell-style="headerCellStyle" :cell-style="cellStyle" :max-height="tableHeight" :height="tableHeight" :show-header="showHeader" :span-method="spanMethod" @cell-dblclick="cellDbClick" :cell-class-name="cellClassName" @row-contextmenu="rowContextMenu">
    <el-table-column type="index" v-if="haveIndex"></el-table-column>
    <el-table-column type="selection" width="60" v-if="selection"></el-table-column>
    <template v-for="(item,index) in tableOption">
      <el-table-column :key="index" :prop="item.prop" :label="item.label" :width="item.width">
        <template slot="header">
          <span v-if="item.tipShow">
            {{item.label}}
            <el-tooltip class="item" :effect="item.effect" :content="item.tipContent" :placement="item.placement" v-if="item.tipShow">
              <i :class="item.icon"></i>
            </el-tooltip>
          </span>
          <span v-else>{{item.label}}</span>
        </template>
        <template slot-scope="scope">
          <slot :name="item.slot" v-if="item.slot" :row="scope.row" :$index="scope.$index"></slot>
          <span v-else>{{scope.row[scope.column.property]}}</span>
        </template>
      </el-table-column>
    </template>
    <el-table-column v-if="operation" label="操作" :width="operationWidth" fixed="right">
      <template slot-scope="scope">
        <slot name="menu" :row="scope.row" :$index="scope.$index" />
      </template>
    </el-table-column>
    <div slot="empty" v-if="haveEmpty">
      <el-empty description="暂无数据" :image-size="250" :image="require('@/assets/img/empty_data.png')"></el-empty>
    </div>
  </el-table>
</template>

<script>
export default {
  name: "Table",//自定义table
  props: {
    border: {//是否开启边框
      type: Boolean,
      default: () => {
        return false
      }
    },
    selection: {//是否有多选checkbox
      type: Boolean,
      default: () => {
        return false
      }
    },
    stickyScroll: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    haveEmpty: {
      type: Boolean,
      default: () => {
        return true
      }
    },
    haveIndex: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    showHeader: {
      type: Boolean,
      default: () => {
        return true
      }
    },
    headerCellStyle: {
      type: Object,
      default: () => {
        return { 'text-align': 'center', 'background-color': '#f2f3f5', 'color': '#606266', 'border-bottom': '1px solid #f2f3f5' }
      }
    },
    cellStyle: {//单元格style
      type: Object,
      default: () => {
        return { 'text-align': 'center', 'padding': '0' }
      }
    },
    operation: {//是否有操作列
      type: Boolean,
      default: () => {
        return false
      }
    },
    operationWidth: {//操作列宽度
      type: String,
      default: () => {
        return '200'
      }
    },
    tableData: {  //接收数据
      type: Array,
      default: () => []
    },
    tableOption: {//表头
      type: Array,
      default: () => []
    },
    tableHeight: {
      type: String,
      default: () => 'null'
    },
    spanMethod: {
      type: Function,
      default: () => 'null'
    }
  },
  data() {
    return {
      multipleSelection: []
    }
  },
  mounted() { },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val
      this.$emit('selectionChange', this.multipleSelection)
    },
    toggleAllSelection() {
      this.$refs.multipleTable.toggleAllSelection();
    },
    clearSelection() {
      this.$refs.multipleTable.clearSelection();
    },
    cellDbClick(row, column, cell, event) {
      this.$emit('cellDbClick', { row, column, cell, event })
    },
    rowContextMenu(row, column, event) {
      this.$emit('rowContextMenu', { row, column, event })
    },
    cellClassName({ row, column, rowIndex, columnIndex }) {
      row.index = rowIndex
      column.index = columnIndex
    },
  }

}
</script>

<style lang="scss" scoped>
/deep/ .el-table__fixed-right,
.el-table__fixed {
  // fixed列高度100%
  height: 100% !important;
}
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
  width: 2px;
  height: 10px;
}

/*滚动条滑块*/
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 5px;
  background: #eeeeee;
}

/*滚动条轨道*/
/deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  background: #fff;
}
</style>